<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>html5本地数据库</title>
		<script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//创建数据库访问对象
			var db=openDatabase("myDB","1.0","test db",2014*10);
			//数据库名称  版本号   描述  大小
			function Add(){
				db.transaction(function(fx){
					//在本地创建数据库和表
					fx.executeSql("create table if not exists UserInfor(UserName TEXT,Pwd TEXT)",[]);
					
					var username=$("#txtAUserName").val();
					var pwd=$("#txtAPwd").val();
					
					fx.executeSql("insert into UserInfor values(?,?)",[username,pwd],function(){
						alert("添加成功");
					});
					
				})
			}
			function Sel(){
				
					var sql="select * from UserInfor where 1=1";
					var username=$("#txtSUserName").val();
					if (username!="") {
						sql+="and UserName='"+username+"'";
					}
					db.transaction(function(fx){
						$("#dCon").html("");
						fx.executeSql(sql,[],function(fx,rs){
						for (var i=0;i<rs.rows.length;i++) {
							var s="<div>"+rs.rows.item(i).UserName+"&nbsp;"+rs.rows.item(i).Pwd+"</div>";
							$("#dCon").append(s);
						}
					})
				})
			}
			function Del(){
				db.transaction(function(fx){
					var username=$("#txtDUserName").val();
					fx.executeSql("delete from UserInfor where UserName=?",[username],function(){
						alert("删除成功");
						Sel();
					})
				})
			}
		</script>
	</head>
	<body>
		<div>
			<input type="text" id="txtAUserName"/>
			<input type="password" id="txtAPwd" />
			<input type="button" value="添加" onclick="Add()"/>
		</div>
		<div>
			<input type="text" id="txtSUserName"/>
			<input type="button" value="查询" onclick="Sel()"/>
		</div>
		<div>
			<input type="text" id="txtDUserName"/>
			<input type="button" value="删除" onclick="Del()"/>
		</div>
		<div id="dCon"></div>
	</body>
</html>
